<template>
	<view class="login">
		<!--顶部返回按钮-->
		<view class="login-top bg-active">
			<image src="../../static/images/logo.png" mode="widthFix" class="logo"></image>
			<!-- <view class="desc">
				<view class="title">Hi~</view>
				<text>{{ appName }}欢迎您</text>
			</view> -->
		</view>
		<view class="login-type-content">
			<image class="login-bg" src="/static/images/login-bg.png" :style="{height: tabCurrentIndex === 1 ? '120vw' : '94vw'}"></image>
			<view class="main">
				<view class="nav-bar">
					<view
							class="nav-bar-item"
							v-for="(item, index) in typeList"
							:key="index"
							:class="tabCurrentIndex === index ? 'nav-bar-item-active text-active' : ''"
							@tap="tabClick(index)"
					>
						{{ item.text }}
					</view>
				</view>
				<block v-if="tabCurrentIndex === 0">
					<view class="login-type-form">
						<view class="input-item">
							<text class="iconfont icon-shoujihao1"></text>
							<input
									class="login-type-input"
									type="number"
									name="mobile"
									v-model="loginParams.mobile"
									placeholder="请输入手机号码"
									maxlength="11"
							/>
						</view>
						<view class="input-item" v-if="loginByPass">
							<text class="iconfont icon-mima"></text>
							<input
									class="login-type-input"
									type="password"
									v-model="loginParams.password"
									placeholder="请输入密码"
									maxlength="20"
							/>
						</view>
						<view class="input-item input-item-sms-code" v-if="!loginByPass">
							<text class="iconfont iconyanzhengma"></text>
							<view class="input-wrapper">
								<view class="rf-input-wrapper">
									<input
											type="number"
											class="login-type-input"
											v-model="loginParams.code"
											placeholder="请输入验证码"
											maxlength="4"
									/>
								</view>
								<button
										class="sms-code-btn"
										@tap.stop="getSmsCode('login')"
								>
									<text>获取验证码</text>
								</button>
							</view>
						</view>
					</view>
					<view class="login-type-tips">
						<!-- <view @tap="showLoginBySmsCode" class="forget-section">
							{{ loginByPass ? '验证码登录' : '密码登录' }}
						</view> -->
						<view class="forget-section"></view>
						<text @tap="show=true">忘记密码？</text>
					</view>
					<button
							class="confirm-btn bg-active"
							:disabled="btnLoading"
							:loading="btnLoading"
							@tap="toLogin"
					>
						登录
					</button>
				</block>
				<block v-if="tabCurrentIndex === 1">
					<view class="login-type-form">
						<view class="input-item">
							<text class="iconfont icon-wode1"></text>
							<input
									class="login-type-input"
									type="text"
									v-model="registerParams.promoCode"
									placeholder="请输入邀请码"
									maxlength="30"
							/>
							<text class="iconfont icon-saoma sm" @tap="scan"></text>
						</view>
						<view class="input-item">
							<text class="iconfont icon-shoujihao1"></text>
							<input
									class="login-type-input"
									type="number"
									name="mobile"
									v-model="registerParams.mobile"
									placeholder="请输入手机号码"
									maxlength="11"
							/>
						</view>
						<view class="input-item">
							<text class="iconfont icon-mima"></text>
							<input
									class="login-type-input"
									type="password"
									v-model="registerParams.password"
									placeholder="请输入密码"
									maxlength="20"
							/>
						</view>
						<view class="input-item">
							<text class="iconfont icon-mima"></text>
							<input
									class="login-type-input"
									type="password"
									v-model="registerParams.password_repetition"
									placeholder="请输入确认密码"
									maxlength="20"
							/>
						</view>
					</view>
					<button
							class="confirm-btn bg-active"
							:disabled="btnLoading"
							:loading="btnLoading"
							@tap="toRegister"
					>
						注册
					</button>
				</block>
			</view>
		</view>
		<view class="login-type-bottom text-active" style="color: #777474;">
			登录注册即同意<text class="xy" @tap="xy">《用户协议》</text>
		</view>
		<u-modal v-model="show" title="联系客服" :content="kf"></u-modal>
	</view>
</template>
<script>
	import {
	    mapMutations  
	} from 'vuex';
	export default {
		data() {
			return {
				kf:"",
				show:false,
				loginParams: {
					mobile: '',
					code: '',
					password: ''
				},
				registerParams: {
					mobile: '',
					password: '',
					password_repetition: '',
					promoCode: '',
					nickname: '',
					code: ''
				},
				btnLoading: false,
				reqBody: {},
				codeSeconds: 0, // 验证码发送时间间隔
				loginByPass: true,
				smsCodeBtnDisabled: true,
				userInfo: null,
				appName: 'DK抖+',
				tabCurrentIndex: 0,
				typeList: [
					{
						text: '登录'
					},
					{
						text: '注册'
					}
				]
			};
		},
		onLoad(options) {
			this.tabCurrentIndex = parseInt(options.type || 0, 10);
			this.$request.post("/getKf", {
				dataType: 'json',
				responseType: 'text'
			})
			.then(res => {
				this.kf = res.data.data;
			})
		},
		methods: {
			...mapMutations(['login']),
			// 提交表单
			async toLogin() {
				if(this.loginParams.mobile==""){
					this.$api.msg("请输入手机号");
					return;
				}
				if(this.loginParams.password==""){
					this.$api.msg("请输入密码");
					return;
				}
				uni.showLoading({
					title:"正在提交",
					mask:true
				})
				this.$request.post("/loginAuth", {
					data:{
						pw:this.loginParams.password,
						tel:this.loginParams.mobile
					},
					dataType: 'json',
					responseType: 'text'
				})
				.then(res => {
					uni.hideLoading();
					this.$api.login(res.data.data);
				})
				.catch(error => {
					uni.hideLoading();
				});
			},
			// 切换登录/注册
			tabClick(index) {
				this.tabCurrentIndex = index;
			},
			// 注册账号
			async toRegister() {
				if(this.registerParams.promoCode==""){
					this.$api.msg("请输入邀请码");
					return;
				} else if(!/^[1][3,4,5,6,7,8,9][0-9]{9}$/.test(this.registerParams.mobile)){
					this.$api.msg("请输入正确的手机号");
					return;
				}else if(!/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]+\S{5,12}$/.test(this.registerParams.password)){
					this.$api.msg("密码需同时含有字母和数字，长度在6-12之间");
					return;
				}else if(this.registerParams.password!=this.registerParams.password_repetition){
					this.$api.msg("两次密码输入不一致");
					return;
				}
				this.$request.post("/register", {
					data:{
						inviteCode:this.registerParams.promoCode,
						pw:this.registerParams.password,
						tel:this.registerParams.mobile
					},
					dataType: 'json',
					responseType: 'text'
				})
				.then(res => {
					this.$api.msg("注册成功");
					this.$api.login(res.data.data);
					// setTimeout(()=> {
					// 	uni.reLaunch({
					// 		url:"/pages/tab/index"
					// 	})
					// }, 1500);
				})
			},
			scan(){
				uni.scanCode({
				    success: (res)=> {
				        // console.log('条码类型：' + res.scanType);
				        // console.log('条码内容：' + res.result);
						try{
							let code = res.result.substring(res.result.indexOf("inviteCode=")+11,res.result.length);
							this.registerParams.promoCode = code;
						}catch(e){
							console.log(e);
						}
				    }
				});
			},
			xy(){
				uni.navigateTo({
					url:"/pages/login/agreement"
				})
			}
		}
	};
</script>
<style lang="scss">
	page {
		background: #fff;
	}
.login {
	width: 100%;
	position: relative;
    .bg-active {
      background-color: #333333;
      color: #fff;
    }
    .text-active, .iconfont {
      color: #333333;
    }
	.back-btn {
		position: absolute;
		left: 40rpx;
		z-index: 9999;
		padding-top: var(--status-bar-height);
		top: 40rpx;
		font-size: 48rpx;
		color: #fff;
	}
	.login-top {
		height: 460rpx;
		position: relative;
		background-image: url(../../static/images/login.jpg);
		background-repeat: no-repeat;
		background-size: cover;
		display: flex;
		justify-content: center;
		align-items: center;
		.desc {
			color: #fff;
			position: absolute;
			top: 200rpx;
			left: 40rpx;
			font-size: 48rpx;
			.title {
				font-size: 48rpx;
			}
		}
		.login-pic {
			position: absolute;
			width: 220rpx;
			height: 270rpx;
			right: 30rpx;
			top: 100rpx;
		}
	}
	.login-type-content {
		position: relative;
		top: -72rpx;
		.login-bg {
			width: 94vw;
			height: 94vw;
			margin: 0 3vw;
		}
		.main {
			width: 94vw;
			position: absolute;
			top: 0;
			left: 3vw;
			.nav-bar {
				display: flex;
				height: 100rpx;
				justify-content: center;
				align-items: center;
				position: relative;
				z-index: 10;
				.nav-bar-item {
					flex: 1;
					display: flex;
					height: 100%;
					line-height: 96rpx;
					font-size: 32rpx;
					display: flex;
					margin: 0 120rpx;
					justify-content: center;
				}
				.nav-bar-item-active {
					border-bottom: 5rpx solid;
				}
			}
			.login-type-form {
				width: 80%;
				margin: 50rpx auto;
				.input-item {
					position: relative;
					height: 90rpx;
					line-height: 90rpx;
					margin-bottom: 30rpx;
					.iconfont {
						font-size: 50rpx;
						position: absolute;
						left: 0;
					}
					.login-type-input {
						height: 90rpx;
						padding-left: 80rpx;
						border-bottom: 1rpx solid rgba(0, 0, 0, .1);
					}
					.sms-code-btn, sms-code-resend {
						width: 240rpx;
						font-size: 26rpx;
					}
				}
			}
			.login-type-tips {
				padding: 0 50rpx;
				display: flex;
				justify-content: space-between;
				font-size: 28upx;
				color: #666;
			}
			.confirm-btn {
				margin-top: 60upx;
				width: 80%;
				letter-spacing: 20rpx;
				height: 80rpx;
				line-height: 80rpx;
			}
		}
	}
	.login-type-bottom {
		width: 100%;
		padding-bottom: 30rpx;
		text-align: center;
		font-size: 32rpx;
	}
    // 发送验证码样式
    .input-item-sms-code {
      .input-wrapper {
        display: flex;
        justify-content: space-between;
        align-items: center;
      }

      .sms-code-btn {
        width: 200upx;
        background-color: #fff;
        display: flex;
        padding: 15upx 0;
        justify-content: center;
        align-items: center;
        border-radius: 12upx;
      }

      .sms-code-resend {
        color: #666;
      }
    }
}
.sm{
	position: absolute;
	right: 0;
	left: unset !important;
	top: 0;
}
.xy{
	cursor: pointer;
	color: #333333;
}
.logo{
	position: relative;
	top: -60rpx;
	width: 120rpx;
	height: 120rpx;
}
</style>
